<template>
  <div>
    <div style="margin: 10px 0">
      <el-button type="primary" @click="add">新增</el-button>
      <el-button>其他</el-button>
    </div>

    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder="请输入关键字" style="width: 30%"/>
      <el-button style="margin-left: 10px" type="primary" @click="list">查询</el-button>
    </div>

    <!--    去掉字段的width, 让其自适应 -->
    <el-table :data="tableData" stripe style="width: 90%">
      <el-table-column
          prop="id"
          label="ID"
          sortable
      >
      </el-table-column>
      <el-table-column
          prop="name"
          label="家居名"
      >
      </el-table-column>
      <el-table-column
          prop="maker"
          label="厂家">
      </el-table-column>

      <el-table-column
          prop="price"
          label="价格">
      </el-table-column>

      <el-table-column
          prop="sales"
          label="销量">
      </el-table-column>

      <el-table-column
          prop="stock"
          label="库存">
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope">
          <el-button @click="handleEdit(scope.row)" type="text">编辑</el-button>
          <!--          引入一个确认框PopConfirm -->
          <!--          <el-button type="text">删除</el-button>-->
          <el-popconfirm
              title="确定删除吗？" @confirm="handleDel(scope.row.id)">
            <template #reference>
              <el-button size="mini" type="text">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--    引入分页组件-可以根据自己的需要进行定制-->
    <div style="margin: 10px 0">
      <el-pagination
          @size-change="handlePageSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5,10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <!-- 添加家居的弹窗
      说明:
      1. el-dialog ：v-model="dialogVisible" 表示对话框, 和dialogVisible 变量双向绑定,控制是否显示对话框
      2. el-form :model="form" 表示表单数据和 form数据变量双向绑定
      3. el-input v-model="form.name" 表示表单的input控件，名字为name 需要和后台Javabean[Furn] 属性一致
         这样，到后端才会进行数据的封装
    -->
    <el-dialog title="提示" v-model="dialogVisible" width="30%">
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <!--        老师说明: prop="name"表示和rules的那个规则关联-->
        <el-form-item label="家居名" prop="name">
          <el-input v-model="form.name" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="厂商" prop="maker">
          <el-input v-model="form.maker" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="form.price" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="销量" prop="sales">
          <el-input v-model="form.sales" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="库存" prop="stock">
          <el-input v-model="form.stock" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// @ is an alias to /src
//引入request组件/对象
import request from "@/utils/request";

export default {
  name: 'HomeView',
  components: {},
  data() {
    return {
      currentPage: 1,//当前页
      pageSize: 5,//每页显示多少数据  正好与后端默认对应上
      total: 10,//一共多少条记录,会通过请求获取到表中记录数
      form: {}, //表单数据
      dialogVisible: false, //控制对话框是否显示,默认为false,不显示
      search: '',
      tableData: [],
      rules: { //提交表单的验证规则
        name: [
          {required: true, message: '请输入家居名', trigger: 'blur'}
        ],
        maker: [
          {required: true, message: '请输入称制造商', trigger: 'blur'}
        ],
        price: [
          {required: true, message: '请输入价格', trigger: 'blur'},
          // 正则表达式,我们讲解java基础时,老韩详细讲过,java web又使用到
          {pattern: /^(([1-9]\d*)|(0))(\.\d+)?$/, message: '请输入数字', trigger: 'blur'}
        ],
        sales: [
          {required: true, message: '请输入销量', trigger: 'blur'},
          {pattern: /^(([1-9]\d*)|(0))$/, message: '请输入数字', trigger: 'blur'}
        ],
        stock: [
          {required: true, message: '请输入库存', trigger: 'blur'},
          {pattern: /^(([1-9]\d*)|(0))$/, message: '请输入数字', trigger: 'blur'}
        ]
      }
    }
  },
  created() { //在此方法中，我们调用list方法，完成数据的显示
    this.list()
  },
  methods: {
    //处理pageSize的变化
    handlePageSizeChange(pageSize) {
      this.pageSize = pageSize
      this.list() //刷新家居列表
    },
    //处理currentPage的变化
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      this.list() //刷新家居列表
    },
    list() { //显示所有家居信息
      // request.get("/api/furn/list").then(
      //     res => {
      //       console.log("res=", res)
      //       //将返回的数据与tableData绑定
      //       this.tableData = res.data
      //     })
      request.get("/api/furn/furnsByConditionPage", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        // console.log("res=", res)
        //将返回的数据和tableData绑定
        this.tableData = res.data.records
        //修改total
        this.total = res.data.total
      })
    },
    save() { //执行添加的方法,提交数据
      if (this.form.id) { //如果id有值,就进行修改
        request.put("/api/furn/update", this.form).then(
            res => {
              //修改成功要给一个提示框
              if (res.code === "200") {
                //成功的消息框
                this.$message({
                  type: "success",
                  message: "更新成功"
                })
              } else {
                //修改失败
                this.$message({
                  type: "error",
                  message: "更新失败" //也可以直接取出后端接口返回的msg
                })
              }
              //刷新家居列表
              this.list()
              //不显示对话框
              this.dialogVisible = false
            }
        )
      } else { //执行添加
        //后端使用post方法进行提交
        //配置了跨域, /api 就是配置的 target
        // request.post("/api/furn/save", this.form).then(
        //     //res就是后端程序返回给前端的结果  箭头函数
        //     res => {
        //       console.log("res=", res)
        //       this.dialogVisible = false
        //       //  保存完成后,把表格刷新一下
        //       this.list()
        //     }
        // )
        //这里我们添加时,与表单验证关联起来,如果验证没有通过,就不提交\
        //valid就可以看到是否验证成功
        this.$refs['form'].validate((valid) => {
          if (valid) { //验证通过
            request.post("/api/furn/save", this.form).then(
                //res就是后端程序返回给前端的结果  箭头函数
                res => {
                  console.log("res=", res)
                  this.dialogVisible = false
                  //  保存完成后,把表格刷新一下
                  this.list()
                }
            )
          } else { //验证没有通过
            this.$message({
              type: "error",
              message: "验证没有通过,不提交" //也可以直接取出后端接口返回的msg
            })
            return false;
          }
        })

      }
    },
    handleEdit(row) {
      // console.log("row1=", row)
      // //JSON.stringify(row) 转成json字符串  直接把target拿出来了 目前是String
      // console.log("row2=", JSON.stringify(row))
      // //还要把json字符串转为json对象
      // console.log("row3=", JSON.parse(JSON.stringify(row)))
      //把得到的数据和form绑定，显示到对话框
      //点击表格当前行的数据与弹出框的数据是独立的：修改以后，只要你不提交，表中数据是不会变的
      //第一种方式
      // this.form = JSON.parse(JSON.stringify(row))
      // this.dialogVisible = true
      //第二种方式
      request.get("/api/furn/find/" + row.id).then(
          res => {
            if (res.code === "200") { //查询成功，取出数据
              this.form = res.data
              this.dialogVisible = true
            } else {
              this.$message({
                type: "error",
                message: res.msg //也可以直接取出后端接口返回的msg
              })
            }
          }
      )
    },
    //add 方法 显示添加的对话框
    add() {
      this.dialogVisible = true;
      //每次显示添加的对话框时,清空表单数据
      this.form = {}
      //将上次验证的信息清空
      this.$refs['form'].resetFields()
    },
    //处理删除
    handleDel(id) {
      request.delete("/api/furn/delete/" + id).then(
          res => {
            //删除成功要给一个提示框
            if (res.code === "200") {
              //成功的消息框
              this.$message({
                type: "success",
                message: "删除成功"
              })
            } else {
              //删除失败
              this.$message({
                type: "error",
                message: res.msg //也可以直接取出后端接口返回的msg
              })
            }
            //刷新家居列表
            this.list()
          }
      )
    }
  }
}
</script>
